<template>
	<el-main class="bg statistics_page">
		<!-- 页面标题 -->
		<div class="page_header">
			<h1 class="page_title">{{ t('registrationStatistics') }}</h1>
			<div class="header_actions">
				<el-button type="primary" icon="el-icon-download" @click="exportExcel">{{ t('exportExcel') }}</el-button>
				<el-button icon="el-icon-refresh" @click="refreshData">{{ t('refresh') }}</el-button>
			</div>
		</div>

		<!-- 数据卡片 -->
		<div class="statistics_cards">
			<div class="stat_card">
				<div class="stat_icon" style="background: #e6f7ff;">
					<i class="el-icon-user-solid" style="color: #1890ff;"></i>
				</div>
				<div class="stat_content">
					<div class="stat_label">{{ t('totalParticipants') }}</div>
					<div class="stat_value">{{ statistics.totalParticipants }}</div>
					<div class="stat_change positive" v-if="statistics.todayIncrease > 0">
						{{ t('todayIncrease') }} +{{ statistics.todayIncrease }}
					</div>
				</div>
			</div>

			<div class="stat_card">
				<div class="stat_icon" style="background: #f6ffed;">
					<i class="el-icon-success" style="color: #52c41a;"></i>
				</div>
				<div class="stat_content">
					<div class="stat_label">{{ t('paidCount') }}</div>
					<div class="stat_value">{{ statistics.paidCount }}</div>
					<div class="stat_percentage">
						{{ t('proportion') }} {{ getPercentage(statistics.paidCount, statistics.totalParticipants) }}%
					</div>
				</div>
			</div>

			<div class="stat_card">
				<div class="stat_icon" style="background: #fff7e6;">
					<i class="el-icon-warning" style="color: #faad14;"></i>
				</div>
				<div class="stat_content">
					<div class="stat_label">{{ t('unpaidCount') }}</div>
					<div class="stat_value">{{ statistics.unpaidCount }}</div>
					<div class="stat_percentage">
						{{ t('proportion') }} {{ getPercentage(statistics.unpaidCount, statistics.totalParticipants) }}%
					</div>
				</div>
			</div>

			<div class="stat_card">
				<div class="stat_icon" style="background: #fff1f0;">
					<i class="el-icon-coin" style="color: #f5222d;"></i>
				</div>
				<div class="stat_content">
					<div class="stat_label">{{ t('totalAmount') }}</div>
					<div class="stat_value">¥{{ formatAmount(statistics.totalAmount) }}</div>
					<div class="stat_percentage">
						{{ t('paidAmount') }} ¥{{ formatAmount(statistics.paidAmount) }}
					</div>
				</div>
			</div>
		</div>

		<!-- 图表区域 -->
		<div class="charts_container">
			<!-- 支付状态饼图 -->
			<div class="chart_card">
				<div class="chart_header">
					<h3>{{ t('paymentStatusDistribution') }}</h3>
				</div>
				<div class="chart_content">
					<div id="paymentChart" style="width: 100%; height: 300px;"></div>
				</div>
			</div>

			<!-- 报名趋势折线图 -->
			<div class="chart_card">
				<div class="chart_header">
					<h3>{{ t('registrationTrend') }}</h3>
				</div>
				<div class="chart_content">
					<div id="trendChart" style="width: 100%; height: 300px;"></div>
				</div>
			</div>

			<!-- 报名时间分布柱状图（替代地域分布） -->
			<div class="chart_card full_width">
				<div class="chart_header">
					<h3>{{ t('registrationTimeDistribution') }}</h3>
				</div>
				<div class="chart_content">
					<div id="regionChart" style="width: 100%; height: 350px;"></div>
				</div>
			</div>
		</div>

		<!-- 详细数据表格 -->
		<div class="data_table_card">
			<div class="card_header">
				<h3>{{ t('detailedData') }}</h3>
				<div class="table_actions">
					<el-input
						v-model="searchKeyword"
						:placeholder="t('search') + '...'"
						style="width: 200px; margin-right: 10px;"
						prefix-icon="el-icon-search"
						clearable
						@input="handleSearch">
					</el-input>
					<el-select v-model="filterStatus" placeholder="筛选状态" style="width: 150px;" @change="handleFilter">
						<el-option label="全部" value=""></el-option>
						<el-option label="已支付" value="已支付"></el-option>
						<el-option label="待支付" value="待支付"></el-option>
						<el-option label="已审核" value="已审核"></el-option>
						<el-option label="未审核" value="未审核"></el-option>
					</el-select>
				</div>
			</div>
			<div class="table_wrapper">
				<el-table :data="tableData" style="width: 100%" stripe max-height="500">
				<el-table-column prop="conference_name" label="会议名称" min-width="200"></el-table-column>
				<el-table-column prop="user_name" label="用户姓名" min-width="120"></el-table-column>
				<el-table-column prop="amount_of_participation" label="金额" min-width="100">
					<template slot-scope="scope">
						¥{{ scope.row.amount_of_participation }}
					</template>
				</el-table-column>
				<el-table-column prop="pay_state" label="支付状态" min-width="100">
					<template slot-scope="scope">
						<el-tag :type="scope.row.pay_state === '已支付' ? 'success' : 'warning'" size="small">
							{{ scope.row.pay_state }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="examine_state" label="审核状态" min-width="100">
					<template slot-scope="scope">
						<el-tag :type="scope.row.examine_state === '已审核' ? 'success' : 'info'" size="small">
							{{ scope.row.examine_state }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="create_time" label="报名时间" min-width="160">
					<template slot-scope="scope">
						{{ $toTime(scope.row.create_time, "yyyy-MM-dd hh:mm:ss") }}
					</template>
				</el-table-column>
			</el-table>
			</div>
			<div class="pagination_wrapper">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
				</el-pagination>
			</div>
		</div>
	</el-main>
</template>

<script>
import * as echarts from 'echarts';

export default {
	name: 'UserParticipationStatistics',
	data() {
		return {
			statistics: {
				totalParticipants: 0,
				paidCount: 0,
				unpaidCount: 0,
				totalAmount: 0,
				paidAmount: 0,
				todayIncrease: 0
			},
			tableData: [],
			allTableData: [],
			searchKeyword: '',
			filterStatus: '',
			currentPage: 1,
			pageSize: 10,
			total: 0,
			paymentChart: null,
			trendChart: null,
			regionChart: null
		}
	},
	mounted() {
		// 先加载数据，再初始化图表
		this.loadDataAndInit();
	},
	beforeDestroy() {
		if (this.paymentChart) {
			this.paymentChart.dispose();
		}
		if (this.trendChart) {
			this.trendChart.dispose();
		}
		if (this.regionChart) {
			this.regionChart.dispose();
		}
	},
	methods: {
		async loadDataAndInit() {
			try {
				console.log('开始加载数据并初始化图表...');
				
				// 先加载后端统计数据（确保与数据库一致）
				await this.loadStatistics();
				
				// 然后加载表格数据（用于图表和表格显示）
				await this.loadTableData(); // 这个会调用 calculateStatisticsFromTableData()
				
				console.log('表格数据加载完成，统计数据:', this.statistics);
				console.log('表格数据条数:', this.allTableData.length);
				
				// 确保数据已经加载并计算完成后，再初始化图表
				// 使用 setTimeout 确保 DOM 已经更新
				setTimeout(() => {
					console.log('数据加载完成，开始初始化图表');
					this.initCharts();
				}, 100);
			} catch (error) {
				console.error('加载数据失败:', error);
				this.$message.error('加载数据失败，请刷新页面重试');
			}
		},
		async loadStatistics() {
			try {
				// 调用后端统计接口
				const json = await this.$get('~/api/user_participation/statistics');
				console.log('统计数据响应（完整）:', JSON.stringify(json, null, 2));
				
				if (json.error) {
					console.error('后端返回错误:', json.error);
					this.$message.error(json.error.message || '获取统计数据失败');
					return;
				}
				
				// 使用后端统计接口的数据（与数据库一致）
				if (json.result) {
					console.log('后端统计数据:', json.result);
					// 使用后端统计的数据，确保与数据库一致
					this.statistics = {
						totalParticipants: Number(json.result.totalParticipants) || 0,
						paidCount: Number(json.result.paidCount) || 0,
						unpaidCount: Number(json.result.unpaidCount) || 0,
						totalAmount: Number(json.result.totalAmount) || 0,
						paidAmount: Number(json.result.paidAmount) || 0,
						todayIncrease: Number(json.result.todayIncrease) || 0
					};
					console.log('已使用后端统计数据更新:', this.statistics);
				} else {
					console.warn('后端统计数据为空，使用前端计算的数据');
				}
			} catch (error) {
				console.error('加载统计数据失败:', error);
				console.error('错误详情:', error.response || error.message);
				this.$message.error('加载统计数据失败: ' + (error.message || '请刷新页面重试'));
				// 如果加载失败，保持初始值（全为0）
			}
		},
		async loadTableData() {
			try {
				// 获取所有数据，不限制数量（用于统计）
				const json = await this.$get('~/api/user_participation/get_list?size=10000');
				console.log('表格数据响应:', json);
				if (json.result) {
					if (json.result.list) {
						this.allTableData = json.result.list;
					} else if (Array.isArray(json.result)) {
						// 如果直接返回数组
						this.allTableData = json.result;
					} else {
						this.allTableData = [];
					}
					this.total = json.result.count || this.allTableData.length;
					console.log('加载到的表格数据条数:', this.allTableData.length);
					
					// 打印前几条数据的 create_time 格式，用于调试
					if (this.allTableData.length > 0) {
						console.log('前3条数据的 create_time 格式示例:');
						this.allTableData.slice(0, 3).forEach((item, index) => {
							console.log(`  记录${index + 1}:`, {
								user_participation_id: item.user_participation_id,
								create_time: item.create_time,
								create_time_type: typeof item.create_time,
								create_time_value: item.create_time
							});
						});
					}
					
					// 不再从前端计算统计，完全依赖后端统计数据
					// this.calculateStatisticsFromTableData(); // 已禁用，使用后端数据
					
					this.filterTableData();
				}
			} catch (error) {
				console.error('加载表格数据失败:', error);
				this.allTableData = [];
			}
		},
		calculateStatisticsFromTableData() {
			// 基于表格数据计算所有统计数据，确保与表格显示一致
			if (!this.allTableData || this.allTableData.length === 0) {
				console.log('表格数据为空，使用默认值');
				this.statistics = {
					totalParticipants: 0,
					paidCount: 0,
					unpaidCount: 0,
					totalAmount: 0,
					paidAmount: 0,
					todayIncrease: 0
				};
				return;
			}
			
			console.log('开始基于表格数据计算统计...');
			
			// 总报名人数
			const totalParticipants = this.allTableData.length;
			
			// 已支付人数（pay_state === '已支付'）
			const paidCount = this.allTableData.filter(item => item.pay_state === '已支付').length;
			
			// 待支付/未支付人数（所有非"已支付"的记录）
			const unpaidCount = this.allTableData.filter(item => 
				!item.pay_state || item.pay_state === '' || 
				(item.pay_state !== '已支付' && (item.pay_state === '待支付' || item.pay_state === '未支付'))
			).length;
			
			// 总金额（所有记录的amount_of_participation之和）
			const totalAmount = this.allTableData.reduce((sum, item) => {
				const amount = Number(item.amount_of_participation) || 0;
				return sum + amount;
			}, 0);
			
			// 已支付金额（已支付记录的amount_of_participation之和）
			const paidAmount = this.allTableData
				.filter(item => item.pay_state === '已支付')
				.reduce((sum, item) => {
					const amount = Number(item.amount_of_participation) || 0;
					return sum + amount;
				}, 0);
			
			// 今日新增（今天创建的记录数）
			const today = new Date();
			today.setHours(0, 0, 0, 0);
			const todayIncrease = this.allTableData.filter(item => {
				if (!item.create_time) return false;
				const createDate = new Date(item.create_time);
				createDate.setHours(0, 0, 0, 0);
				return createDate.getTime() === today.getTime();
			}).length;
			
			// 更新统计数据
			this.statistics = {
				totalParticipants,
				paidCount,
				unpaidCount,
				totalAmount,
				paidAmount,
				todayIncrease
			};
			
			console.log('基于表格数据计算的统计:', this.statistics);
		},
		filterTableData() {
			let filtered = [...this.allTableData];
			
			// 搜索过滤
			if (this.searchKeyword) {
				const keyword = this.searchKeyword.toLowerCase();
				filtered = filtered.filter(item => 
					(item.conference_name && item.conference_name.toLowerCase().includes(keyword)) ||
					(item.user_name && item.user_name.toLowerCase().includes(keyword))
				);
			}
			
			// 状态过滤
			if (this.filterStatus) {
				if (this.filterStatus === '已支付') {
					filtered = filtered.filter(item => item.pay_state === '已支付');
				} else if (this.filterStatus === '待支付') {
					// 待支付包括：待支付、未支付、null、空字符串等所有非"已支付"的记录
					filtered = filtered.filter(item => 
						!item.pay_state || item.pay_state === '' || 
						(item.pay_state !== '已支付' && (item.pay_state === '待支付' || item.pay_state === '未支付'))
					);
				} else if (this.filterStatus === '已审核' || this.filterStatus === '未审核') {
					filtered = filtered.filter(item => item.examine_state === this.filterStatus);
				}
			}
			
			this.total = filtered.length;
			const start = (this.currentPage - 1) * this.pageSize;
			const end = start + this.pageSize;
			this.tableData = filtered.slice(start, end);
		},
		handleSearch() {
			this.currentPage = 1;
			this.filterTableData();
		},
		handleFilter() {
			this.currentPage = 1;
			this.filterTableData();
		},
		handleSizeChange(val) {
			this.pageSize = val;
			this.filterTableData();
		},
		handleCurrentChange(val) {
			this.currentPage = val;
			this.filterTableData();
		},
		formatAmount(amount) {
			// 格式化金额显示
			if (!amount && amount !== 0) return '0.00';
			const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount;
			if (isNaN(numAmount)) return '0.00';
			return numAmount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
		},
		getPercentage(value, total) {
			// 计算百分比，避免NaN
			if (!total || total === 0) return '0.0';
			if (!value && value !== 0) return '0.0';
			const percentage = (value / total) * 100;
			return percentage.toFixed(1);
		},
		async initCharts() {
			// 确保DOM已经渲染，数据已经加载
			this.$nextTick(async () => {
				console.log('开始初始化图表，当前统计数据:', this.statistics);
				console.log('当前表格数据条数:', this.allTableData.length);
				
				// 只有在数据加载完成后才初始化图表
				if (this.allTableData !== undefined) {
					this.initPaymentChart();
					await this.initTrendChart(); // 等待趋势图表加载完成（从后端获取数据）
					this.initRegionChart();
				} else {
					console.warn('数据尚未加载，延迟初始化图表');
					setTimeout(() => {
						this.initCharts();
					}, 500);
				}
			});
		},
		initPaymentChart() {
			const chartDom = document.getElementById('paymentChart');
			if (!chartDom) {
				console.warn('paymentChart DOM元素不存在');
				return;
			}
			
			// 如果图表已存在，先销毁
			if (this.paymentChart) {
				this.paymentChart.dispose();
			}
			
			this.paymentChart = echarts.init(chartDom);
			
			// 完全使用后端统计数据，不从表格数据计算
			const paidCount = Number(this.statistics.paidCount) || 0;
			const unpaidCount = Number(this.statistics.unpaidCount) || 0;
			
			console.log('支付状态图表 - 使用后端统计数据 - 已支付:', paidCount, '待支付:', unpaidCount, '总人数:', this.statistics.totalParticipants);
			
			const option = {
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)'
				},
				legend: {
					orient: 'vertical',
					left: 'left'
				},
				series: [{
					name: '支付状态',
					type: 'pie',
					radius: ['40%', '70%'],
					avoidLabelOverlap: false,
					itemStyle: {
						borderRadius: 10,
						borderColor: '#fff',
						borderWidth: 2
					},
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '20',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [
						{ 
							value: paidCount, 
							name: '已支付', 
							itemStyle: { color: '#52c41a' } 
						},
						{ 
							value: unpaidCount, 
							name: '待支付', 
							itemStyle: { color: '#faad14' } 
						}
					]
				}]
			};
			this.paymentChart.setOption(option);
		},
		async initTrendChart() {
			const chartDom = document.getElementById('trendChart');
			if (!chartDom) {
				console.warn('trendChart DOM元素不存在');
				return;
			}
			
			// 如果图表已存在，先销毁
			if (this.trendChart) {
				this.trendChart.dispose();
			}
			
			this.trendChart = echarts.init(chartDom);
			
			console.log('📊 初始化报名趋势图表，从后端数据库获取所有历史数据');
			
			// 从后端数据库获取所有历史趋势数据
			try {
				console.log('🔍 开始请求后端API: ~/api/user_participation/trend_statistics');
				const json = await this.$get('~/api/user_participation/trend_statistics');
				console.log('🔍 API请求完成，收到响应:', json);
				
				if (json.error) {
					console.error('❌ 获取趋势数据失败:', json.error);
					this.$message.error(json.error.message || '获取报名趋势数据失败');
					return;
				}
				
				// 如果json本身就是null或undefined
				if (!json) {
					console.error('❌ API返回的数据为null或undefined');
					this.$message.error('获取数据失败：返回值为空');
					return;
				}
				
				console.log('=== 完整响应数据 ===');
				console.log('json对象:', json);
				console.log('json.result:', json.result);
				console.log('json.result类型:', typeof json.result);
				
				// 深度检查数据结构
				if (json.result) {
					console.log('json.result的所有键:', Object.keys(json.result));
					console.log('json.result.trendData:', json.result.trendData);
					console.log('json.result.trendData类型:', typeof json.result.trendData);
					console.log('json.result.trendData是否为数组:', Array.isArray(json.result.trendData));
				}
				
				console.log('完整响应数据JSON字符串:', JSON.stringify(json, null, 2));
				
				// 多种方式尝试提取数据（后端可能返回驼峰或下划线命名）
				let trendData = null;
				
				// 方式1：标准路径 - 驼峰命名
				if (json.result && json.result.trendData) {
					trendData = json.result.trendData;
					console.log('✅ 方式1成功：从 json.result.trendData 获取数据');
				}
				// 方式2：标准路径 - 下划线命名（后端BaseService会转换）
				else if (json.result && json.result.trend_data) {
					trendData = json.result.trend_data;
					console.log('✅ 方式2成功：从 json.result.trend_data 获取数据');
				}
				// 方式3：直接 result 就是数组
				else if (Array.isArray(json.result)) {
					trendData = json.result;
					console.log('✅ 方式3成功：json.result 本身就是数组');
				}
				// 方式4：data 字段 - 驼峰命名
				else if (json.data && json.data.trendData) {
					trendData = json.data.trendData;
					console.log('✅ 方式4成功：从 json.data.trendData 获取数据');
				}
				// 方式5：data 字段 - 下划线命名
				else if (json.data && json.data.trend_data) {
					trendData = json.data.trend_data;
					console.log('✅ 方式5成功：从 json.data.trend_data 获取数据');
				}
				// 方式6：直接 data 是数组
				else if (Array.isArray(json.data)) {
					trendData = json.data;
					console.log('✅ 方式6成功：json.data 本身就是数组');
				}
				// 方式7：直接是数组
				else if (Array.isArray(json)) {
					trendData = json;
					console.log('✅ 方式7成功：json 本身就是数组');
				}
				else {
					console.error('❌ 所有方式都失败，无法找到 trendData 或 trend_data');
					console.error('json.result的所有键:', json.result ? Object.keys(json.result) : 'N/A');
					console.error('json结构:', JSON.stringify(json, null, 2));
					this.$message.error('数据格式错误，无法找到趋势数据');
					return;
				}
				
				// 确保是数组
				if (!Array.isArray(trendData)) {
					console.error('❌ trendData 不是数组类型！实际类型:', typeof trendData, '值:', trendData);
					this.$message.error('数据格式错误，趋势数据不是数组');
					return;
				}
				
				console.log('✅ 从后端获取的趋势数据:', trendData);
				console.log('趋势数据数组长度:', trendData.length);
				console.log('趋势数据类型:', Array.isArray(trendData) ? 'Array' : typeof trendData);
				
				if (trendData.length === 0) {
					console.warn('⚠️ 趋势数据为空数组');
					// 即使数据为空，也初始化一个空图表
					this.renderTrendChart([], []);
					return;
				}
				
				// 打印每条数据用于调试
				console.log('=== 逐条检查趋势数据 ===');
				trendData.forEach((item, idx) => {
					console.log(`数据[${idx}]:`, item);
					console.log(`数据[${idx}]类型:`, typeof item);
					if (item) {
						console.log(`数据[${idx}]的所有键:`, Object.keys(item));
						console.log(`数据[${idx}].label:`, item.label);
						console.log(`数据[${idx}].date:`, item.date);
						console.log(`数据[${idx}].count:`, item.count, '类型:', typeof item.count);
					}
				});
				
				// 提取标签和数值
				const labels = [];
				const values = [];
				
				trendData.forEach((item, index) => {
					if (!item) {
						console.warn(`⚠️ 趋势数据项[${index}]为空:`, item);
						labels.push('未知');
						values.push(0);
						return;
					}
					
					// 提取标签
					const label = item.label || item.date || '未知';
					console.log(`提取标签[${index}]:`, item, '->', label);
					labels.push(label);
					
					// 提取数值
					let count = 0;
					if (item.count !== undefined && item.count !== null) {
						if (typeof item.count === 'number') {
							count = item.count;
						} else if (typeof item.count === 'string') {
							count = parseInt(item.count, 10) || 0;
						} else {
							count = Number(item.count) || 0;
						}
					}
					console.log(`提取数值[${index}]:`, item, '->', count);
					values.push(count);
				});
				
				console.log('趋势图表 - 标签数组:', labels);
				console.log('趋势图表 - 数值数组:', values);
				console.log('标签数组长度:', labels.length);
				console.log('数值数组长度:', values.length);
				
				// 验证数据
				if (labels.length !== values.length) {
					console.error('标签和数值长度不匹配！', { labels: labels.length, values: values.length });
					this.$message.error('数据格式错误：标签和数值数量不匹配');
					return;
				}
				
				// 渲染图表
				console.log('准备渲染图表，标签数:', labels.length, '数值数:', values.length);
				this.renderTrendChart(labels, values);
				
			} catch (error) {
				console.error('加载趋势数据失败:', error);
				this.$message.error('加载报名趋势数据失败，请刷新页面重试');
			}
		},
		renderTrendChart(labels, values) {
			if (!this.trendChart) {
				console.error('❌ trendChart 未初始化，无法渲染图表');
				return;
			}
			
			console.log('=== 开始渲染趋势图表 ===');
			console.log('接收到的标签:', labels);
			console.log('接收到的数值:', values);
			console.log('标签类型:', Array.isArray(labels) ? 'Array' : typeof labels);
			console.log('数值类型:', Array.isArray(values) ? 'Array' : typeof values);
			
			// 验证数据
			if (!Array.isArray(labels) || !Array.isArray(values)) {
				console.error('❌ 标签或数值不是数组类型！', { labels, values });
				return;
			}
			
			if (labels.length === 0 || values.length === 0) {
				console.warn('⚠️ 标签或数值为空，渲染空图表');
				// 即使为空也渲染，至少显示图表框架
			}
			
			// 计算最大值，用于设置Y轴范围（向上取整，提供一些余量）
			const maxValue = values.length > 0 ? Math.max(...values, 1) : 1; // 至少为1，避免全0时显示异常
			const yAxisMax = Math.max(Math.ceil(maxValue * 1.2), 2); // 至少为2，确保有足够的显示空间
			
			console.log('报名趋势 - 数据值:', values);
			console.log('最大值:', maxValue);
			console.log('Y轴最大值:', yAxisMax);
			
			// 如果数据点太多，自动计算标签显示间隔，避免标签重叠
			const labelInterval = labels.length > 30 ? Math.ceil(labels.length / 30) : 0;
			
			const option = {
				tooltip: {
					trigger: 'axis',
					formatter: function(params) {
						let result = params[0].axisValue + '<br/>';
						params.forEach(function(item) {
							result += item.marker + item.seriesName + ': ' + item.value + ' 人<br/>';
						});
						return result;
					}
				},
				xAxis: {
					type: 'category',
					data: labels,
					axisLabel: {
						interval: labelInterval, // 如果数据点太多，自动隐藏部分标签
						rotate: labels.length > 20 ? 45 : 0, // 如果数据点太多，旋转45度
						formatter: function(value) {
							return value;
						}
					}
				},
				yAxis: {
					type: 'value',
					min: 0,
					max: yAxisMax, // 动态设置最大值，不归一化
					interval: Math.ceil(yAxisMax / 5), // 自动计算间隔
					axisLabel: {
						formatter: '{value}' // 显示实际数值，不带单位
					},
					name: '人数',
					nameLocation: 'middle',
					nameGap: 40
				},
				series: [{
					name: '报名人数',
					data: values,
					type: 'line',
					smooth: true,
					symbol: 'circle',
					symbolSize: labels.length > 50 ? 4 : 6, // 数据点多时，标记点小一点
					areaStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{ offset: 0, color: 'rgba(82, 196, 26, 0.3)' },
								{ offset: 1, color: 'rgba(82, 196, 26, 0.1)' }
							]
						}
					},
					itemStyle: {
						color: '#52c41a'
					},
					label: {
						show: labels.length <= 30, // 数据点少时显示标签，多时不显示避免重叠
						position: 'top',
						formatter: '{c}' // 显示实际数值
					}
				}]
			};
			
			console.log('图表配置option:', JSON.stringify(option, null, 2));
			console.log('准备调用 setOption...');
			
			try {
				this.trendChart.setOption(option, true); // 第二个参数true表示不合并，完全替换
				console.log('✅ setOption 调用成功');
				
				// 强制刷新图表
				this.$nextTick(() => {
					if (this.trendChart) {
						this.trendChart.resize();
						console.log('✅ 图表 resize 完成');
					}
				});
				
				console.log('✅ 报名趋势图表渲染完成');
			} catch (error) {
				console.error('❌ setOption 失败:', error);
				this.$message.error('图表渲染失败: ' + error.message);
			}
		},
		getDailyStatistics() {
			// 直接从下方表格数据（allTableData）中统计最近7天每天的报名数量
			// 确保使用实际的表格数据，而不是其他数据源
			console.log('=== 开始统计每日数据 ===');
			console.log('使用的数据源: allTableData');
			console.log('allTableData 长度:', this.allTableData ? this.allTableData.length : 0);
			
			const dailyMap = {};
			
			// 初始化最近7天
			const labels = [];
			const dateKeys = []; // 保存顺序的日期键
			for (let i = 6; i >= 0; i--) {
				const date = new Date();
				date.setHours(0, 0, 0, 0); // 设置为当天0点，避免时区问题
				date.setDate(date.getDate() - i);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const dateKey = `${year}-${month}-${day}`; // YYYY-MM-DD
				const label = `${month}/${day}`; // MM/DD格式
				labels.push(label);
				dateKeys.push(dateKey);
				dailyMap[dateKey] = 0;
			}
			
			console.log('要统计的日期范围:', dateKeys);
			
			// 统计实际数据 - 严格使用 allTableData（下方表格的数据）
			if (!this.allTableData || this.allTableData.length === 0) {
				console.warn('⚠️ allTableData 为空，无法统计每日数据');
				const values = dateKeys.map(key => 0);
				return { labels, values };
			}
			
			console.log('开始遍历 allTableData，总记录数:', this.allTableData.length);
			let processedCount = 0;
			let validCount = 0;
			let invalidDateCount = 0;
			let outOfRangeCount = 0;
			
			this.allTableData.forEach((item, index) => {
				if (!item.create_time) {
					console.warn(`记录 ${index + 1} (ID: ${item.user_participation_id}) 没有 create_time 字段`);
					return;
				}
				
				processedCount++;
				try {
					let date;
					// 处理多种日期格式
					if (typeof item.create_time === 'number') {
						// 时间戳（毫秒或秒）
						date = new Date(item.create_time > 1000000000000 ? item.create_time : item.create_time * 1000);
					} else if (typeof item.create_time === 'string') {
						// 字符串格式
						// 处理 "2025-10-31 16:51:27" 或 "2025-10-31T16:51:27" 等格式
						const dateStr = item.create_time.replace(' ', 'T');
						date = new Date(dateStr);
					} else {
						date = new Date(item.create_time);
					}
					
					// 检查日期是否有效
					if (isNaN(date.getTime())) {
						console.warn(`记录 ${index + 1} (ID: ${item.user_participation_id}) 日期格式无效:`, item.create_time);
						invalidDateCount++;
						return;
					}
					
					// 转换为本地日期（避免时区问题）
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					const dateKey = `${year}-${month}-${day}`;
					
					if (dailyMap.hasOwnProperty(dateKey)) {
						dailyMap[dateKey]++;
						validCount++;
					} else {
						outOfRangeCount++;
						// 只在调试时打印，避免日志过多
						if (index < 5 || outOfRangeCount <= 3) {
							console.log(`日期不在最近7天内: ${dateKey}，记录ID: ${item.user_participation_id}`);
						}
					}
				} catch (e) {
					console.error(`解析日期失败 - 记录 ${index + 1} (ID: ${item.user_participation_id}):`, item.create_time, e);
					invalidDateCount++;
				}
			});
			
			console.log('=== 统计完成 ===');
			console.log('总记录数:', processedCount);
			console.log('有效统计记录数（在最近7天内）:', validCount);
			console.log('无效日期数:', invalidDateCount);
			console.log('超出范围记录数:', outOfRangeCount);
			console.log('每日统计数据:', dailyMap);
			
			// 按照日期键的顺序提取值
			const values = dateKeys.map(key => dailyMap[key] || 0);
			
			console.log('每日统计结果 - 标签:', labels);
			console.log('每日统计结果 - 数值:', values);
			console.log('数值总和:', values.reduce((a, b) => a + b, 0));
			
			return { labels, values };
		},
		async initRegionChart() {
			const chartDom = document.getElementById('regionChart');
			if (!chartDom) {
				console.warn('regionChart DOM元素不存在');
				return;
			}
			
			// 如果图表已存在，先销毁
			if (this.regionChart) {
				this.regionChart.dispose();
			}
			
			this.regionChart = echarts.init(chartDom);
			
			console.log('📊 初始化报名时间分布图表，从后端数据库获取月份统计数据');
			
			// 从后端数据库获取月份统计数据
			try {
				console.log('🔍 开始请求后端API: ~/api/user_participation/monthly_statistics');
				const json = await this.$get('~/api/user_participation/monthly_statistics');
				console.log('🔍 API请求完成，收到响应:', json);
				
				if (json.error) {
					console.error('❌ 获取月份统计数据失败:', json.error);
					this.$message.error(json.error.message || '获取报名时间分布数据失败');
					// 失败时显示空图表
					this.renderMonthlyChart([], []);
					return;
				}
				
				// 提取数据
				let monthlyData = null;
				if (json.result && json.result.monthly_data) {
					monthlyData = json.result.monthly_data;
				} else if (json.result && json.result.monthlyData) {
					monthlyData = json.result.monthlyData;
				} else if (Array.isArray(json.result)) {
					monthlyData = json.result;
				}
				
				if (!monthlyData || !Array.isArray(monthlyData) || monthlyData.length === 0) {
					console.warn('⚠️ 月份数据为空');
					this.renderMonthlyChart([], []);
					return;
				}
				
				console.log('✅ 从后端获取的月份数据:', monthlyData);
				
				// 提取标签和数值
				const labels = [];
				const values = [];
				
				monthlyData.forEach((item, index) => {
					const label = item.label || item.month || '未知';
					const count = Number(item.count) || 0;
					labels.push(label);
					values.push(count);
				});
				
				console.log('月份图表 - 标签数组:', labels);
				console.log('月份图表 - 数值数组:', values);
				
				this.renderMonthlyChart(labels, values);
			} catch (error) {
				console.error('❌ 获取月份统计数据失败:', error);
				this.$message.error('获取月份统计数据失败: ' + (error.message || '请刷新页面重试'));
				// 失败时显示空图表
				this.renderMonthlyChart([], []);
			}
		},
		renderMonthlyChart(labels, values) {
			console.log('报名时间分布图表数据 - 标签:', labels, '数值:', values);
			
			const option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				xAxis: {
					type: 'category',
					data: labels,
					axisLabel: {
						rotate: 45
					}
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					name: '报名数量',
					data: values,
					type: 'bar',
					itemStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: '#83bff6' },
							{ offset: 1, color: '#188df0' }
						])
					}
				}]
			};
			
			try {
				this.regionChart.setOption(option, true);
				console.log('✅ 报名时间分布图表渲染完成');
			} catch (error) {
				console.error('❌ 月份图表渲染失败:', error);
				this.$message.error('图表渲染失败: ' + error.message);
			}
		},
		async refreshData() {
			this.$message.info('正在刷新数据...');
			await this.loadStatistics();
			await this.loadTableData();
			// 重新初始化图表，使用最新数据
			this.$nextTick(() => {
				this.initCharts();
				this.$message.success('数据已刷新');
			});
		},
		async exportExcel() {
			try {
				this.$message.info('正在导出Excel...');
				
				// 使用 xlsx 库在前端直接生成 Excel 文件
				const XLSX = require('xlsx');
				
				// 准备导出数据：使用 allTableData（所有数据）
				const exportData = this.allTableData.map((item, index) => {
					// 解析参会人信息
					let attendeesInfo = '';
					try {
						if (item.attendees_data) {
							const attendees = typeof item.attendees_data === 'string' 
								? JSON.parse(item.attendees_data) 
								: item.attendees_data;
							if (Array.isArray(attendees)) {
								attendeesInfo = attendees.map(a => `${a.name}(${a.idCard || ''})`).join('; ');
							}
						}
					} catch (e) {
						attendeesInfo = item.attendees_data || '';
					}
					
					return {
						'序号': index + 1,
						'会议名称': item.conference_name || '',
						'用户姓名': item.user_name || '',
						'会议编号': item.meeting_number || '',
						'会议类型': item.meeting_type || '',
						'会议时间': this.$toTime(item.meeting_time, "yyyy-MM-dd hh:mm:ss") || '',
						'会议地点': item.meeting_venue || '',
						'报名类型': item.registration_type || '',
						'参与金额': item.amount_of_participation || 0,
						'支付状态': item.pay_state || '未支付',
						'支付方式': item.pay_type || '',
						'审核状态': item.examine_state || '未审核',
						'是否住宿': item.accommodation_or_not || '否',
						'参会人信息': attendeesInfo,
						'订单备注': item.order_notes || '',
						'报名时间': this.$toTime(item.create_time, "yyyy-MM-dd hh:mm:ss") || '',
						'更新时间': this.$toTime(item.update_time, "yyyy-MM-dd hh:mm:ss") || ''
					};
				});
				
				// 创建工作簿
				const wb = XLSX.utils.book_new();
				
				// 创建工作表
				const ws = XLSX.utils.json_to_sheet(exportData);
				
				// 设置列宽
				const colWidths = [
					{ wch: 6 },   // 序号
					{ wch: 25 },  // 会议名称
					{ wch: 12 },  // 用户姓名
					{ wch: 15 },  // 会议编号
					{ wch: 12 },  // 会议类型
					{ wch: 18 },  // 会议时间
					{ wch: 20 },  // 会议地点
					{ wch: 12 },  // 报名类型
					{ wch: 12 },  // 参与金额
					{ wch: 10 },  // 支付状态
					{ wch: 10 },  // 支付方式
					{ wch: 10 },  // 审核状态
					{ wch: 10 },  // 是否住宿
					{ wch: 40 },  // 参会人信息
					{ wch: 30 },  // 订单备注
					{ wch: 18 },  // 报名时间
					{ wch: 18 }   // 更新时间
				];
				ws['!cols'] = colWidths;
				
				// 将工作表添加到工作簿
				XLSX.utils.book_append_sheet(wb, ws, '报名数据');
				
				// 生成文件名（包含当前日期时间）
				const now = new Date();
				const dateStr = now.getFullYear() + 
					String(now.getMonth() + 1).padStart(2, '0') + 
					String(now.getDate()).padStart(2, '0') + '_' +
					String(now.getHours()).padStart(2, '0') +
					String(now.getMinutes()).padStart(2, '0');
				const fileName = `报名数据统计_${dateStr}.xlsx`;
				
				// 导出文件
				XLSX.writeFile(wb, fileName);
				
				this.$message.success(`导出成功！共导出 ${exportData.length} 条记录`);
			} catch (error) {
				console.error('导出失败:', error);
				this.$message.error('导出失败，请重试: ' + (error.message || '未知错误'));
			}
		}
	},
	watch: {
		statistics: {
			deep: true,
			handler() {
				if (this.paymentChart) {
					this.initPaymentChart();
				}
			}
		}
	}
}
</script>

<style scoped>
/* 确保统计页面可以滚动 */
.statistics_page {
	padding: 2rem;
	background: #f0f2f5;
	/* 移除高度限制，让内容自然延伸，由父容器 article 处理滚动 */
	height: auto !important;
	min-height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}

.page_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
	padding: 1.5rem;
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.page_title {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	color: #333;
}

.header_actions {
	display: flex;
	gap: 1rem;
}

/* 统计卡片 */
.statistics_cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.stat_card {
	background: white;
	padding: 1.5rem;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	gap: 1rem;
	transition: all 0.3s ease;
}

.stat_card:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat_icon {
	width: 60px;
	height: 60px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
}

.stat_content {
	flex: 1;
}

.stat_label {
	font-size: 14px;
	color: #666;
	margin-bottom: 0.5rem;
}

.stat_value {
	font-size: 28px;
	font-weight: 700;
	color: #333;
	margin-bottom: 0.25rem;
}

.stat_percentage {
	font-size: 12px;
	color: #999;
}

.stat_change {
	font-size: 12px;
	font-weight: 600;
}

.stat_change.positive {
	color: #52c41a;
}

/* 图表容器 */
.charts_container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.chart_card {
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.chart_card.full_width {
	grid-column: 1 / -1;
}

.chart_header {
	padding: 1.5rem;
	border-bottom: 1px solid #f0f0f0;
}

.chart_header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: #333;
}

.chart_content {
	padding: 1.5rem;
}

/* 数据表格卡片 */
.data_table_card {
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	padding: 1.5rem;
}

/* 表格容器，添加滚动功能 */
.table_wrapper {
	max-height: 600px;
	overflow-y: auto;
	overflow-x: auto;
	/* 美化滚动条 */
}

.table_wrapper::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.table_wrapper::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
}

.table_wrapper::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 4px;
}

.table_wrapper::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
}

.card_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
}

.card_header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: #333;
}

.table_actions {
	display: flex;
	gap: 1rem;
}

.pagination_wrapper {
	margin-top: 1.5rem;
	display: flex;
	justify-content: flex-end;
}

@media (max-width: 768px) {
	.charts_container {
		grid-template-columns: 1fr;
	}
	
	.statistics_cards {
		grid-template-columns: 1fr;
	}
	
	.page_header {
		flex-direction: column;
		gap: 1rem;
		align-items: flex-start;
	}
}
</style>


